<style>
<!--
-->

div#image-0{
	top: 0px;
	height: 100%;
	width: 50%;
	left: 25%;
	opacity: 0.1;
	display: none;
	overflow: hidden;
}
div#image-1{
	bottom: 5%;
	height: 150px;
	width: 150px;
	left: 27%;
	display: none;
}
div#image-2{
	height: 70px;
	width: 65px;
	border-radius: 25px;
	border: 2px solid red;
	background: green;
	padding: 5px;
}
div#image-2 img{
	border-radius: 20px;
	border: 1px solid red;
}
div#image-2 div.text{
	border-radius: 10px;
	position: absolute;
	top: -15px;
	left: 0px;
	background: black;
	opacity: 0.87;
	color: white;
	padding: 2px;
	text-align: center;
}

div#text-0{
	bottom: 25%;
	height: 6%;
	width: 20%;
	background: black;
	opacity: 0.85;
	color: white;
	left: 23%;
	border-radius: 20px;
	padding: 10px;
	font-size: 15px;
	display: none;
}
div.isTextAnimated span{
	float:left;
}

div#text-1{
	background: black;
	opacity: 0.85;
	color: white;
	top: 23%;
	left: 42%;
	border-radius: 20px;
	padding: 10px;
	font-size: 25px;
	width: 330px;
	display: none;
}
</style>

<h1></h1>
<!--  ->
<div class="text">This is a Text, I am testing 日本語はどう.</div>
<!--  -->
<div id="image-0" class="image-element">
	<img alt="" src="/uploads/images/birthday_cake1_1920x1200.jpg">
</div>

<div id="image-1" class="image-element">
	<img alt="" src="/uploads/images/emo12.gif">
</div>

<div id="image-2" class="image-element">
	<img alt="" src="/uploads/images/3D_61.gif">
	<div class="text">Hey, follow me!</div>
</div>

<div id="text-0" class="text-element">
	<div class="text">お誕生日おめでとうございます！\(^-^)/</div>
</div>

<div id="text-1" class="text-element">
	<div class="text">Kayono Nakajima主 将</div>
</div>

<script>
$(function(){
	
	/**
	$("div.text").click(function () {
	      $(this).show("explode", {
	    	  mode: "hide", 
		      pieces: 100,
		      
		  }, 2000);
		  $(this).hide("slow");
	});
	/**/
/**/
	$("div#image-1").draggable({
		//revert: true
	});

	var isRunning = false;
	$(document).click(function(){

		// guarantee execute only one time
		if (isRunning) return;
		isRunning = true;
		
		$("div#image-0").slideDown(3000, function(){
			//alert("123");

		}).animate({
			opacity: 0.82,
			borderRadius: "20px"
		},2000, function(){

			$("div#image-0 img").animate({
				borderRadius: "20px"
			});
			
			//alert($(this).attr("id"));
			$(this).mouseenter(function(){
				//alert("alert");
				$("div#image-1").show("slow");
				$("div#text-1").fadeIn("slow");
				//$("div#text-0").show("slow");
			});
		});
	});
/**/

	var showingMessage = 0;
	$("div#image-1").mouseenter(function(){
		if (showingMessage > 0) return;
		showingMessage = 1;
		
		$("div#text-0").delay(1000).fadeIn("slow", function(){
			showingMessage = 2;
		});

		$(this).animate({
			opacity: 0.5
		},1000);
	});
	$("div#image-1").mouseleave(function(){
		//if (showingMessage < 2) return;
		$("div#text-0").delay(3000).fadeOut("slow", function(){
			showingMessage = 0;
			$("div#image-1").animate({
				opacity: 1
			},1000);
		});
	});
	
	$("div#text-0 div.text").textAnimation({
		mode:"highlight",
		baseColor:"#FFFFFF",      //base font color   
	    highlightColor:"#2FFF5F", //highlight font color  
	    //onStart:"mouseenter",     //event handler for start animation[Browse jQuery Events]  
	    //onFinish:"mouseleave",    //event handler for finish animation[Browse jQuery Events]  
	    delay:35,                 //delay time for animation between characters[integer]   
	    interval:0,               //interval time for between animation[integer]  
	    duration:100              //animation duration time[integer]  
	    //repeat:false              //repeat animation[boolean]  
	});
	
	var colorChanging = false;
	$("div#text-1").mouseenter(function(){
		
		var changeColor = function(started){
			var color = get_random_color();
			var delay = (Math.random() + 0.5) * 1000;
			var size = (Math.random() + 2) + 10 + "px";
			$("div#text-1 div.text div").each(function(i){
				//if (!started) t = i*15;
				//else t = 0;
				$(this).delay(i*15).animate({
					color: color
				}, delay, function(){
					if (colorChanging) changeColor(true);
				});
			});
		};
		if (!colorChanging){
			//alert("run");
			colorChanging = true;
			changeColor(false);
		}
	});

	$("div#text-1 div.text").textAnimation({
		mode:"roll",  
	    minsize:20,            //minimum font size[integer]  
	    magnification:30,      //magnification[integer]  
	    onStart:"mouseenter",  //event handler for start animation[Browse jQuery Events]  
	    onFinish:"mouseleave", //event handler for finish animation[Browse jQuery Events]  
	    fixed:"top",           //which fixed top or bottom ["top","bottom"]  
	    delay:5,               //delay time for animation between characters[integer]   
	    stuff:1.2,              //font stuff quantity[float]
	    repeat: false  
	});

	run_away_from_mouse("div#image-2");
});

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

function run_away_from_mouse(elem){
	$(document).mousemove(function(e){
		$(elem).clearQueue();
		$(elem).animate({
			top: e.pageY,
			left: e.pageX
		});
	});
}
</script>